<template>
  <el-dialog
      v-model="planDetailWinDialogVisible"
      title="查看计划信息"
      width="50%"
  >
    <template #default>
      <el-descriptions >
        <el-descriptions-item label="计划编码">{{plan.planCode}}</el-descriptions-item>
        <el-descriptions-item label="计划名称">{{plan.planName}}</el-descriptions-item>
        <el-descriptions-item label="计划类型">
          {{plan.planType}}
        </el-descriptions-item>
        <el-descriptions-item label="频率">
          {{plan.planRate}}
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          {{plan.startTime}}
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          {{plan.endTime}}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="info" v-if="plan.planStatus == 1">草稿</el-tag>
          <el-tag type="success" v-else-if="plan.planStatus == 2">已确定</el-tag>
          <el-tag type="primary" v-else-if="plan.planStatus == 3">审核中</el-tag>
          <el-tag type="info" v-else-if="plan.planStatus == 4">已审核</el-tag>
          <el-tag type="primary" v-else-if="plan.planStatus == 5">已完成</el-tag>

        </el-descriptions-item>
        <el-descriptions-item label="备注" aria-colcount="3">
          <div v-html="plan.planNotes"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <el-button @click="planDetailWinDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch} from "vue";
import ledgerRequest from "@/api/ledger.js";
import maintainPlanRequest from "@/api/maintainPlan.js";
// 申明组件的属性
const props = defineProps(['planId']);
// 弹窗标记
let planDetailWinDialogVisible = ref(false);
// 详情对象
let plan = ref({})
// 通过id加载
function loadLedger(){
  maintainPlanRequest.selectById(props.planId,res=>{
    if(res.data){
      plan.value = res.data;
      planDetailWinDialogVisible.value = true;
    }
  });
}
// 属性侦听
watch(()=>props.planId,()=>{
  if(props.planId){
    loadLedger();
  }
});

</script>
<style scoped>

</style>